<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="零售收银-选择SN">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style>
        .layui-input{
            font-size: 16px;
        }
        .layui-input:focus{border-color:#4287cf!important}


        div.button{
            border: 1px solid #dddddd;border-radius: 4px;padding: 20px;color: #666;
        }

        div.button:hover{
            cursor: pointer;
            background-color: #eeeeee;
        }


        .item-title{
            height: 51px;line-height: 51px;display: inline-block;
            font-size: 16px;font-weight: bold;text-align: left;
            color: #666;
        }

        .item-content{
            border-bottom:1px solid #dddddd;
            width: 330px;
        }

        .item-content:hover{
            cursor: pointer;
        }

        .item-content div{
            height: 51px;line-height: 51px;display: inline-block;overflow: hidden;
            font-size: 14px;
            color: #666;
        }

        .selected-content {
            background-color: #ffeeb9;
        }
    </style>

    <script>
        let list = [];
        let selected_list = [];
        let used_list = [];

        jQuery(function () {

            console.log("selectSn 1111");
            $('[name="search"]').bind("input propertychange",function(event){
                loadData();
            });

            $("#selectAll").click(function () {
                $.each(list, function (i,d) {
                    selected_list.push(d);
                });
                list = [];
                renderBody();
                current_has_selected_index = 1;
                selectedHasLine(current_has_selected_index);
            });

            $("#backAll").click(function () {
                $.each(selected_list, function (i,d) {
                    list.push(d);
                });
                selected_list = [];
                renderBody();
                current_wait_selected_index=1;
                selectedWaitLine(current_wait_selected_index);

            });

            console.log("selectSn 222");
            $(window).focus();
            window.addEventListener("keydown", function(e) {
                console.log("selectSn e.keyCode:"+e.keyCode);
                if (e.keyCode == 0x1B){
                    closeAllDialog();
                } else if (e.keyCode == 89 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {//ctrl+Y
                    ctrlY();
                } else if (0x0D == e.keyCode && e.shiftKey) {
                    shiftEnter();
                } else if (e.keyCode == 0x0D){
                    enter();
                } else if (e.keyCode == 38){
                    up();
                    e.preventDefault();
                } else if (e.keyCode == 39){
                    right();
                    e.preventDefault();
                }  else if (e.keyCode == 37){
                    left();
                    e.preventDefault();
                } else if (e.keyCode == 40){
                    down();
                    e.preventDefault();
                }
            }, false);

            $(".esc").click(function () {
                closeAllDialog();
            });

            $(".enter").click(function () {
                shiftEnter();
            });

            console.log("selectSn 3333");
            loadData();


            console.log("selectSn 4444");
        });

        function checkCanUse(item) {
            let flag = true;
            $.each(selected_list, function (i,d) {
                if (item.sn == d.sn) {
                    flag = false;
                    return false;
                }
            });

            $.each(used_list, function (i,d) {
                if (item.sn == d.sn) {
                    flag = false;
                    return false;
                }
            });

            return flag;
        }

        function loadData() {
            get("${baseUrl}house/goodsSn/listOut.action?goodsId=${goodsId}&houseId=${houseId}&search="+$('[name="search"]').val(), function (res) {
                if (res.code == 0) {
                    list = [];
                    $.each(res.data, function (i,d) {
                        if (checkCanUse(d)){
                            list.push(d);
                        }
                    });

                    renderBody();
                    if (max_wait_data_length > 0) {
                        selectedWaitLine(current_wait_selected_index);
                    }
                }
            });
        }

        function renderBody() {
            let child = '';
            max_wait_data_length = list.length;
            $.each(list, function (i,d) {
                d.index = i+1;
                child+=genWaitSnTr(d);
            });
            $("#listBody").empty();
            $("#listBody").append(child);
            if (current_wait_selected_index > max_wait_data_length){
                current_wait_selected_index = max_wait_data_length;
            }

            if (current_wait_selected_index == 0) {
                current_wait_selected_index = 1;
            }

            child = '';
            max_has_data_length = selected_list.length;
            $.each(selected_list, function (i,d) {
                d.index = i+1;
                child+=genHasSnTr(d);
            });
            $("#selectedListBody").empty();
            $("#selectedListBody").append(child);
            if (current_has_selected_index > max_has_data_length){
                current_has_selected_index = max_has_data_length;
            }

            if (current_has_selected_index == 0) {
                current_has_selected_index = 1;
            }

            $("#selected-number").html(max_has_data_length);
        }



        function focusWindow() {
            $(window).focus();
            $('[name="search"]').focus();
        }

        function ctrlY() {
            focusWindow();
        }

        function left() {
            if (max_wait_data_length > 0) {
                selectedWaitLine(current_wait_selected_index);
            }
        }
        function right() {
            if (max_has_data_length > 0) {
                selectedHasLine(current_has_selected_index);
            }
        }

        function up() {

            focusWindow();
            if (getSelectedType() == 1) {
                if (current_wait_selected_index<=1){
                    current_wait_selected_index=1;
                } else {
                    current_wait_selected_index--;
                }

                selectedWaitLine(current_wait_selected_index);
            } else {
                if (current_has_selected_index<=1){
                    current_has_selected_index=1;
                } else {
                    current_has_selected_index--;
                }

                selectedHasLine(current_has_selected_index);
            }
        }


        function down() {

            focusWindow();

            if (getSelectedType() == 1) {
                if (current_wait_selected_index>=max_wait_data_length){
                    current_wait_selected_index=max_wait_data_length;
                } else {
                    current_wait_selected_index++;
                }
                selectedWaitLine(current_wait_selected_index);
            } else {
                if (current_has_selected_index>=max_has_data_length){
                    current_has_selected_index=max_has_data_length;
                } else {
                    current_has_selected_index++;
                }
                selectedHasLine(current_has_selected_index);
            }
        }

        
        function getSelectedType() {
            let $selected_content = $('.selected-content');
            let id = $selected_content.parent().attr("id");
            if (id=="listBody"){
                return 1;
            } else {
                return 2;
            }
        }

        function enter() {
            if (getSelectedType() == 1){
                let index = current_wait_selected_index-1;
                selected_list.push(list[index]);
                list.splice(index,1);

                renderBody();
                if (current_wait_selected_index>=max_wait_data_length){
                    current_wait_selected_index=max_wait_data_length;
                }
                if (max_wait_data_length > 0){
                    selectedWaitLine(current_wait_selected_index);
                } else {
                    current_has_selected_index = 1;
                    selectedHasLine(current_has_selected_index);
                }

            } else {
                let index = current_has_selected_index-1;
                list.push(selected_list[index]);
                selected_list.splice(index,1);
                max_has_data_length--;
                max_wait_data_length++;

                renderBody();
                if (current_has_selected_index>=max_has_data_length){
                    current_has_selected_index=max_has_data_length;
                }
                if (max_has_data_length > 0) {
                    selectedHasLine(current_has_selected_index);
                } else {
                    current_wait_selected_index = 1;
                    selectedWaitLine(current_wait_selected_index);
                }
            }
        }

        function shiftEnter() {
            window.parent.getSelectSnList(selected_list);
            closeAllDialog();
        }

        function closeAllDialog() {
            console.log("selectSn closeAllDialog");
            window.parent.closeAllDialog();
        }

        let current_wait_selected_index = 1;
        let max_wait_data_length = 0;
        function clickWaitContent(index) {
            current_wait_selected_index = index;
            selectedWaitLine(current_wait_selected_index);
            enter();
        }
        let current_has_selected_index = 1;
        let max_has_data_length = 0;
        function clickHasContent(index) {
            current_has_selected_index = index;
            selectedHasLine(current_has_selected_index);
            enter();
        }


        function selectedWaitLine(index) {
            let $parent = $("#listBody");

            $("#selectedListBody .item-content").removeClass("selected-content");
            $("#listBody .item-content").removeClass("selected-content");
            $("#listBody .item-content[index='" + index + "']").addClass("selected-content");

            let $this = $("#listBody .item-content[index='" + index + "']");
            $parent.animate({
                scrollTop: $this.offset().top-$this.height() - $parent.offset().top + $parent.scrollTop()
            },1);
        }

        function selectedHasLine(index) {
            let $parent = $("#selectedListBody");

            $("#listBody .item-content").removeClass("selected-content");
            $("#selectedListBody .item-content").removeClass("selected-content");
            $("#selectedListBody .item-content[index='" + index + "']").addClass("selected-content");

            let $this = $("#selectedListBody .item-content[index='" + index + "']");
            $parent.animate({
                scrollTop: $this.offset().top-$this.height() - $parent.offset().top + $parent.scrollTop()
            },1);
        }

        function genWaitSnTr(item) {
            let child = '<div class="item-content" onclick="clickWaitContent('+item.index+');" index="'+item.index+'" data=\''+JSON.stringify(item)+'\'>\n' +
                '                <div style="width: 50px;text-align: center">'+item.index+'</div>\n' +
                '                <div style="width: 100px;text-align: center">'+item.sn+'</div>\n' +
                '                <div style="width: 163px;text-align: center">'+genString(item.remark)+'</div>\n' +
                '            </div>';
            return child;
        }

        function genHasSnTr(item) {
            let child = '<div class="item-content" onclick="clickHasContent('+item.index+');" index="'+item.index+'" data=\''+JSON.stringify(item)+'\'>\n' +
                '                <div style="width: 50px;text-align: center">'+item.index+'</div>\n' +
                '                <div style="width: 100px;text-align: center">'+item.sn+'</div>\n' +
                '                <div style="width: 163px;text-align: center">'+genString(item.remark)+'</div>\n' +
                '            </div>';
            return child;
        }
        
        
        function setGoodsSnList(goodsSnList) {

            console.log("selectSn setGoodsSnList");
            selected_list = goodsSnList;
        }

        function setUsedSnList(goodsSnList) {

            console.log("selectSn setUsedSnList");
            used_list = goodsSnList;
            loadData();
        }
    </script>
</html:header>
<body style="margin:0;background-color: #F8F8F8;width: 780px;">
<div style="width: 740px;height:50px;padding-left: 20px;padding-top:10px;position: relative">
    <input class="layui-input" name="search" placeholder="扫描或输入序列号(Ctrl+Y)"  autocomplete="off" style="padding-left: 40px;">
    <div style="position: absolute;top: 10px;left:30px;height: 38px;line-height: 38px;">
        <i class="layui-icon layui-icon-search"></i>
    </div>
</div>
<div style="width: 100%;height:351px;background-color: #FFFFFF;border-top: 1px solid #dddddd; border-bottom:1px solid #dddddd; overflow: hidden">
    <div style="width: 330px;height:351px;float: left;margin-left: 20px; border:1px solid #dddddd ">
        <div style="width: 330px;height: 51px;line-height: 51px;font-size: 16px;text-align: center;color: #666;border-bottom: 1px solid #dddddd">待选</div>
        <div style="border-bottom: 1px solid #dddddd">
            <div class="item-title" style="width: 50px;text-align: center">序号</div>
            <div class="item-title" style="width: 100px;text-align: center">序列号</div>
            <div class="item-title" style="width: 163px;text-align: right">备注</div>
        </div>

        <div id="listBody" style="height: 240px;overflow-y:scroll">

        </div>
    </div>

    <div style="width: 80px;height:351px;float: left">
        <div style="width: 60px; height:60px;margin: 0 auto;padding-top: 115px;">
            <div id="selectAll" class="button"><i class="layui-icon layui-icon-next"></i></div>
            <div id="backAll" class="button" style="margin-top: 4px;"><i class="layui-icon layui-icon-prev"></i></div>
        </div>

    </div>

    <div style="width: 330px;height:351px;float: left;border:1px solid #dddddd ">
        <div style="width: 330px;height: 51px;line-height: 51px;font-size: 16px;text-align: center;color: #666;border-bottom: 1px solid #dddddd">已选</div>
        <div style="border-bottom: 1px solid #dddddd">
            <div class="item-title" style="width: 50px;text-align: center">序号</div>
            <div class="item-title" style="width: 100px;text-align: center">序列号</div>
            <div class="item-title" style="width: 163px;text-align: right">备注</div>
        </div>

        <div id="selectedListBody" style="height: 240px;overflow-y:scroll">
        </div>
    </div>

</div>

<div style="overflow: hidden;height: 60px;line-height: 60px;">
    <div style="float: left;padding-left: 20px;font-size: 18px;color: #666;">
        已选<span id="selected-number" style="font-weight: bold;color: #FFB800;padding-left: 12px;padding-right: 12px;">0</span>个序列号
    </div>

    <div style="float: right;padding-right: 20px;">
        <button class="layui-btn layui-btn-normal enter">确认选择(Shift+Enter)</button>
        <button class="layui-btn layui-btn-primary esc">取消(Esc)</button>
    </div>
</div>
</body>

</html>